import Vue from "vue";   //引入vue
import Vuex from "vuex"; //引入vuex
Vue.use(Vuex);           //全局使用 

export default new Vuex.Store({
    state:{              //state类似data 初始化init 
        count:"0",
        list:[
            {id:1,age:20,name:'老王'},
            {id:2,age:18,name:'老王'},
            {id:3,age:24,name:'老王'},
            {id:4,age:23,name:'老王'},
            {id:5,age:22,name:'老王'},
            {id:6,age:2,name:'老王'},
        ],
    },
                //mutations 类似methods 写方法对数据做出更改(同步操作)
    mutations:{ //只用mutataions中的函数才有权力修改 state中的数据 
        add(state){ 
            state.count++   
        //     setTimeout(()=>{ 
        //          state.count++
        //     },1000) //mutations函数中  不能写异步 执行异步 
         },
        add2(state,step){
            state.count += step
        },
        sub(state){
            state.count--
        },
        subn(state,step){
            state.count -= step
        },


    },
               //action类型methods 写方法对数据做出更改(异步操作) 
    actions:{  //在actions中不能直接修改state中的数据
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')  //触发mutation 
            },1000)
        },
        addNasync(context,step){
            setTimeout(()=>{
                context.commit('add2',step)  //触发mutation 
            },1000)
        },

        subAsync(context){
            setTimeout(()=>{
                context.commit('sub')  //触发mutation 
            },1000)
        },
        subNasync(context,step){
            setTimeout(()=>{
                context.commit('subn',step)  //触发mutation 
            },1000)
        },

    },
    getters:{  //这里getters 类似computed
        showNum(state){
            return `最新的num数儿 ${state.count}`
        },
        moreAge18(state){
            return state.list.filter(e=>{
                return e.age>18
            })
        },  //可以接收第二个参数 getters就是我们store中的getters 并且第一个参数不能省略
        moreAge18Length(state,getters){ 
            return getters.moreAge18.length 
        },
    }
})

